<template>
  <div class="max-w-screen-xl mx-auto px-4 md:px-8">
    <div class="items-start justify-between md:flex">
      <div class="max-w-lg">
        <h1 class="text-gray-800 text-xl font-bold sm:text-2xl">书签</h1>
        <p class="text-gray-600 mt-2">
          您在此书籍中标注的所有标签
        </p>
      </div>
      <div class="mt-3 md:mt-0">
        <a @click="addBookMark"
          class="inline-block px-4 py-2 text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 md:text-sm">添加书签</a>
      </div>
    </div>
    <div class="mt-12 relative h-max overflow-auto">
      <table class="w-full table-auto text-sm text-left">
        <thead class="text-gray-600 font-medium border-b">
          <tr>
            <th class="py-3 pr-6">章节号</th>
            <th class="py-3 pr-6">时间</th>
            <!-- <th class="py-3 pr-6">章节简介</th> -->
            <th class="py-3 pr-6"></th>
          </tr>
        </thead>
        <tbody class="text-gray-600 divide-y">
          <tr v-for="(item, id) in tableItems" :key="id">
            <td class="pr-6 py-4 whitespace-nowrap">第{{ item.chapter_index }}章</td>
            <td class="pr-6 py-4 whitespace-nowrap">{{ item.time_added }}</td>
            <!-- <td class="pr-6 py-4 whitespace-nowrap">{{ item.description }}</td> -->
            <td class="text-right whitespace-nowrap">
              <a href="javascript:void(0)" @click="router.push(`/reader/${route.params.id}/${item.chapter_index}`)"
                class="py-1.5 px-3 text-gray-600 hover:text-red duration-150 hover:bg-gray-50 border rounded-lg">跳转</a>
              <a @click="deleteBookmark(item.chapter_index)" href="javascript:void(0)"
                class="py-1.5 px-3 text-red-600 hover:text-red-500 duration-150 hover:bg-red-700-50 border rounded-lg">删除书签</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { addBookmarkApi, deleteBookmarkApi, getBookmarkApi } from "@/apis/bookMark";
import { useRoute } from "vue-router";
import { getCurrentInstance } from 'vue';
import router from '@/router';
const { proxy } = getCurrentInstance();
const route = useRoute();
const tableItems = ref([]);

const deleteBookmark = (id) => {
  console.log(id);
  const res = deleteBookmarkApi(id.value,proxy);
  console.log(res.message);
  if (res.sussess) {
    ElMessage({
      type: 'success',
      message: '删除成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: '删除失败',
    })
  }
}
const addBookmark_temp = async () => {
  console.log("addBookmark_temp is called");
  const book_id = route.params.id;
  const chapter_id = route.params.chapterID;
  const chapter_index = Number(route.params.chapter_index);
  console.log(book_id, chapter_id ,chapter_index ,proxy)
  await addBookmarkApi(
    book_id,
    // chapter_id
      chapter_index,
    proxy
  )
}
const addBookMark = () => {
  ElMessageBox.confirm(
    '您确定要将此章节添加书签吗',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      addBookmark_temp()
      ElMessage({
        type: 'success',
        message: '添加成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消添加',
      })
    })
}
const getBookmarks = async () => {
  console.log(route.params.id);
  const res = await getBookmarkApi((route.params.id))
  console.log(res);
  tableItems.value = res.bookmark;
  console.log(tableItems.value);
}
onMounted(() => {
  getBookmarks();
})
</script>